<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>DensePhrases</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="files/style.css">
<link rel="shortcut icon" href="files/plogo.png">

<script src="files/all.js"></script>
<script src="files/jquery-3.3.1.min.js"></script>
<script src="files/popper.min.js"></script>
<script src="files/bootstrap.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics 
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0Y11JZZBFP"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-0Y11JZZBFP');
</script>
-->

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LTTRHHW2M6"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-LTTRHHW2M6');
</script>

<body>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
	<a class="navbar-brand" href="">DensePhrases</a>
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item"><a class="nav-link" target="_blank" href="https://arxiv.org/abs/2012.12624">Paper</a>
        </li>
        <li class="nav-item"><a class="nav-link" target="_blank" href="https://github.com/jhyuklee/DensePhrases">Code</a>
        </li>
    </ul>
</nav>

    <div class="list-group-mine">
    </div>
    <div class="list-group-item">
        <div class="paper_title">
        <strong><h2>DensePhrase Demo</h2></strong>
	Project by <a target="_blank" href="https://jhyuklee.github.io/">Jinhyuk Lee</a>&nbsp;&nbsp;<a target="_blank" href="https://mjeensung.github.io/resume/">Mujeen Sung</a>&nbsp;&nbsp;<a target="_blank" href="https://uk.linkedin.com/in/alexander-wettig">Alexandar Wettig</a>&nbsp;&nbsp;<a target="_blank" href="https://dmis.korea.ac.kr/jaewoo-kang-p-i">Jaewoo Kang</a>&nbsp;&nbsp;<a target="_blank" href="https://www.cs.princeton.edu/~danqic/">Danqi Chen</a><br/>
        Korea University&nbsp;&nbsp;Princeton University<br/>
        </div>
        <div class="detail">
        <hr/>
	From 5 million Wikipedia articles, <em>DensePhrases</em> searches phrase-level answers to your questions or retrieve relevant passages in real-time. More details are in our <a href='https://arxiv.org/abs/2012.12624'>ACL'21 paper</a> and <a href='https://arxiv.org/abs/2109.08133'>EMNLP'21 paper</a>.
	<div style="line-height:50%;"><br></div>
        You can type in any natural language question below and get the results in real-time. Retrieved phrases are denoted in <b>boldface</b> for each passage. Current model is case-sensitive and the best results are obtained when queries have proper letter cases (e.g., "Name Apple's products" not "name apple's products"). Our current demo has the following specs:
	<div style="line-height:50%;"><br></div>
        <ul>
          <li>Accuracy: 40.8% on Natural Questions (open), Latency: ≈100ms/Q (with at least top 10 results) </li>
          <li>Resources: 11GB GPU, 100GB RAM </li>
	  <li><a target="_blank" href="https://github.com/jhyuklee/DensePhrases">Code link</a> | Contact: <a target="_blank" href="https://jhyuklee.github.io/">Jinhyuk Lee</a> (lee.jnhk@gmail.com) </li>
        </ul>
    </div>

<div class="container" id="container">
    <!-- Default inline 1-->

    <div class="input-group mb-1 mt-4">
        <div class="input-group-prepend">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">Examples
            </button>
            <div class="dropdown-menu" id="examples">
            </div>
        </div>

        <input id="question" type="text" class="form-control" placeholder="Write a question" autocomplete="off"
               aria-label="Write a question"
               autofocus>
        <div class="input-group-append">
            <button id="search" class="btn btn-secondary" type="button">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </div>

    <div class="row" style="margin-top:8px">
        <div id="ret-time" class="text-secondary ml-1 col"></div>
        <div class="custom-control custom-checkbox mr-3">
            <input type="checkbox" class="custom-control-input small" id="realtime_chk">
            <label class="custom-control-label" for="realtime_chk">Real-time Search</label>
            <!--
            !-->
            &nbsp;&nbsp;English Wikipedia (2018.12.20)
        </div>
    </div>
    <br/>


    <div class="card">
        <ul id="ret-results" class="list-group list-group-flush">
            <li class="list-group-item"></li>
        </ul>
    </div>

</div>

<!--
<footer class="footer">
    <div class="container">
			<span class="text-muted">
				<strong>DensePhrases Demo</strong><br/>
                                Jinhyuk Lee, Mujeen Sung, Jaewoo Kang, Danqi Chen<br/>
			</span>
    </div>
</footer>
-->

<script>
    var tout_id = 0;
    $("#realtime_chk").prop('checked', true);

    $("#question").keypress(function (e) {
        // console.log(e.which)
        var is_real = $("#realtime_chk").is(":checked") == true;
        if (is_real) {
            if (e.which == 32) {
                $("#search").click();
            }
        }
        if (e.which == 13 || e.which == 63) {
            $("#search").click();
        }
    });

    $("#search").click(function () {
        var query = $("#question").val();
        if (query.trim().length > 0) {
            execute(query);
        } else {
            init_result();
        }
    });

    function init_result() {
        $("#ret-time").text("");
        $("#ret-results").html("<li class=\"list-group-item\"></li>");
    }

    function highlight(text, start, end) {
        new_text = text.split("");
        new_text[start] = "<strong>" + new_text[start];
        new_text[end - 1] = new_text[end - 1] + "</strong>";
        // new_text = new_text.slice(Math.max(start-200, 0), (end+200));
        return new_text.join("");
    }

    function execute(text) {
        // $("#ret-time").text("Latency: ");
        var start_time = +new Date();
        $.get("/api?query=" + encodeURIComponent(text), function (out) {
            var end_time = +new Date();
            var total_latency = end_time - start_time;
            $("#ret-time").text(out['ret'].length + " results (" + out['time'] + "ms)"); // + "for \"" + text + "\"");
            $("#ret-results").empty();
            result = out['ret']
            for (var i = 0; i < result.length; i++) {
                $("#ret-results").append("<li class=\"list-group-item\"><div class=\"row\">"
                    + "<div class=\"col-10\">" + highlight(result[i]["context"], result[i]["start_pos"], result[i]["end_pos"]) + "</div>"
                    + "<div class=\"col-2 text-right\">"
                        + "<div class=\"row-1 text-right\">" + result[i]["title"] + "</div>"
                        + "<div class=\"row-1 text-right\">&nbsp;</div>"
                        + "<div class=\"score row-1\"> <em>f(s|D,q)=" + result[i]["score"].toFixed(2) + "</em></div>"
                    + "</div>"
                    + "</div></li>")
            }
        });
    }

    $.getJSON("/get_examples", function (examples) {
        for (let example of examples) {
            $('#examples').append("<a class=\"dropdown-item\" href=\"#\">" + example + "</a>");
        }
    });

    $("#container").on("click", ".dropdown-item", function (event) {
        $('#question').val($(event.target).text());
        $('#question').focus();
        $("#search").click();
    });


</script>

</body>

</html>
